<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'

import RePagination from '@/components/RePagination/index.vue'
import OperationDialog from './OperationDialog.vue'
import { _deleteOperation, _queryOperations } from '@/api/auth'
import { OperationItem } from '@/api/types'
import { Message } from '@/utils/message'
import { Confirm } from '@/utils/messageBox'

const { t } = useI18n()
const queryInfo = reactive({
  keyword: '',
  pageNum: 1,
  pageSize: 20,
  total: 0
})
const tableData = ref()
const formRef = ref()
const operationDialogRef = ref()
onMounted(() => {
  search()
})
const search = () => {
  _queryOperations(queryInfo).then(res => {
    const { list, total } = res.data
    tableData.value = list
    queryInfo.total = total
  })
}
const pageChanged = () => {
  search()
}
const reset = () => {
  formRef.value.resetFields()
}

const handleOperation = (row: OperationItem | undefined) => {
  operationDialogRef.value.show(row)
}

const handleDelete = (row: OperationItem) => {
  Confirm(`确定删除 ${row.code} 操作吗？`).then(() => {
    _deleteOperation(row.id)
      .then(res => {
        Message.success(res.message)
        search()
      })
      .catch(err => {
        Message.error(err.message)
      })
  })
}
</script>

<template>
  <div class="p-[20px]">
    <el-form
      ref="formRef"
      :inline="true"
      :model="queryInfo"
      class="search-form"
    >
      <el-form-item label="关键词" prop="keyword">
        <el-input
          v-model="queryInfo.keyword"
          placeholder="输入关键词搜索"
          clearable
        />
      </el-form-item>

      <el-form-item>
        <el-button @click="reset">{{ t('button.resetText') }}</el-button>
        <el-button type="primary" @click="search">{{
          t('button.queryText')
        }}</el-button>
        <el-button type="primary" @click="handleOperation(undefined)">{{
          t('button.addText')
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="操作名称" prop="name" />
      <el-table-column label="code" prop="code" />
      <el-table-column label="描述" prop="description" />
      <el-table-column label="创建人" prop="createdByName" />
      <el-table-column label="创建时间" prop="createTime">
        <template #default="{ row }">
          {{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="更新人" prop="updatedByName" />
      <el-table-column label="创建时间" prop="updateTime">
        <template #default="{ row }">
          {{ dayjs(row.updateTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleOperation(row)">{{
            t('button.editText')
          }}</el-button>
          <el-button type="primary" link @click="handleDelete(row)">{{
            t('button.deleteText')
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <RePagination
      v-model:current="queryInfo.pageNum"
      v-model:page-size="queryInfo.pageSize"
      :total="queryInfo.total"
      @change="pageChanged"
    />
    <OperationDialog ref="operationDialogRef" @after-success="search" />
  </div>
</template>
